<template>
<div>
  <p>转换前：</p>
      <el-input
        v-model="input"
        :autosize="{ minRows: 7, maxRows: 4 }"
        type="textarea"
        placeholder="请输入需要转换的JSON"
      />
      <p>
        转换后：<i
          class="iconfont icon-fuzhi"
          @click="handleCopy"
          title="点击复制结果"
        ></i>
      </p>
      <el-input
        v-model="output"
        :autosize="{ minRows: 7, maxRows: 4 }"
        type="textarea"
        placeholder="转换结果"
        v-clipboard:copy="copyContent"
      />
      <el-button @click="convert">点击转换</el-button>
</div>
</template>

<script setup>
import { reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";

const data = reactive({
  input: "",
  output: "",
});

const { input, output } = toRefs(data);

//转换操作
const convert = () => {
  try {
    data.output = JSON.stringify(JSON.parse(data.input), null, 2);
  } catch (e) {
    ElMessage({
      showClose: true,
      message: "您还没有输入内容！",
      type: "error",
    });
  }
};

const copyContent = computed(() => {
  return data.output;
});

//复制事件
const handleCopy = () => {
  if (data.output === "")
    return ElMessage({
      showClose: true,
      message: "不能复制空内容！",
      type: "error",
    });
  ElMessage({
    showClose: true,
    message: "复制成功",
    type: "success",
  });
};

const router = useRouter();
const handleClose = () => {
  router.push("/");
};
</script>

<style lang="less" scoped>

  P {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    margin: 5px 5px 5px 5px;
  }
  .el-button {
    margin-top: 10px;
  }

</style>